<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/resources/element/index.css">
    <!-- 先引入 Vue -->
    <script src="../resources/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../resources/element/index.js"></script>

    <script src="../resources/axios/axios.min.js"></script>
</head>
<style>
    .el-table .info-row {
        background: #c9e5f5;
    }

    .el-table .positive-row {
        background: #e2f0e4;
    }
</style>

<body>
<!--<div id="menu">-->
<!--<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">-->
<!--<el-menu-item><i class="el-icon-menu"></i>领航动力</el-menu-item>-->
<!--<el-menu-item index="1"><i class="el-icon-setting"></i>运行状态</el-menu-item>-->
<!--<el-menu-item index="2"><i class="el-icon-message"></i>报警信息</el-menu-item>-->
<!--</el-menu>-->
<!--<div class="line"></div>-->
<!--</div>-->


<div id="menu">
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <!--<el-menu-item index="1">处理中心</el-menu-item>-->
        <el-menu-item><i class="el-icon-menu"></i>领航动力</el-menu-item>
        <el-submenu index="2">
            <template slot="title">队列状态</template>
            <!--<el-menu-item index="2-1">选项1</el-menu-item>-->
            <!--<el-menu-item index="2-2">选项2</el-menu-item>-->
            <!--<el-menu-item index="2-3">选项3</el-menu-item>-->
        </el-submenu>
        <el-menu-item index="3">配置管理</el-menu-item>
    </el-menu>
</div>

<!--<div id="btnDiv">-->
    <!--<el-button v-on:click.native="showStatus" type="primary">显示状态</el-button>-->
<!--</div>-->
<div id="configDiv">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
        <el-form-item label="表名称" prop="tableName">
            <el-input v-model="ruleForm.tableName"></el-input>
        </el-form-item>
        <el-form-item label="是否抄送实时表" prop="pptFlg">
            <el-switch v-model="ruleForm.pptFlg"></el-switch>
        </el-form-item>
        <el-form-item label="实时表Schema" prop="pptTableSchema">
            <el-input v-model="ruleForm.pptTableSchema"></el-input>
        </el-form-item>
        <el-form-item label="实时表名称" prop="pptTableName">
            <el-input v-model="ruleForm.pptTableName"></el-input>
        </el-form-item>

        <el-form-item label="是否抄送历史表" prop="hisFlg">
            <el-switch v-model="ruleForm.hisFlg"></el-switch>
        </el-form-item>
        <el-form-item label="历史表Schema" prop="hisTableSchema">
            <el-input v-model="ruleForm.hisTableSchema"></el-input>
        </el-form-item>
        <el-form-item label="历史表名称" prop="hisTableName">
            <el-input v-model="ruleForm.hisTableName"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</div>


</body>


<script>
    //导航

    new Vue({
        el: '#menu',
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1'
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    });

    new Vue ({
        el:"#configDiv",
        data() {
            return {
                ruleForm: {
                    tableName: '',
                    ppt: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                rules: {
                    tableName: [
                        { required: true, message: '请输入表名称', trigger: 'blur' }
                    ],
                    region: [
                        { required: true, message: '请选择活动区域', trigger: 'change' }
                    ],
                    date1: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    date2: [
                        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    type: [
                        { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                    ],
                    resource: [
                        { required: true, message: '请选择活动资源', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请填写活动形式', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios({
                            method: 'post',
                            url: 'addConfig.do',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded',
                            }
                        }).then(function (response) {
                            console.log("status:" + response.status);
                            console.log("data:" + response.data);
//                            queueTable.tableData2 = response.data;
                        }).catch(function (error) {
                            console.log(error);
                        });
//                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    });

</script>
</html>